import React, { Component } from 'react'
import {withRouter} from 'react-router'
class Searchinput extends Component {
    state={
        kw:''
    }
    componentDidMount(){
        if(this.props.match.params.keyword){
            this.setState({
                kw:this.props.match.params.keyword
            })
        }
        
    }
    componentDidUpdate(prevProps){
        if(prevProps.match.params.keyword !== this.props.match.params.keyword){
            this.setState({
                kw:this.props.match.params.keyword
            })
        }
    }
    changeKW=(e)=>{
        this.setState({
            kw:e.target.value
        })
    }
    keyup=(e)=>{
        // 必须按回车键才可以跳转页面

        // console.log(e.keyCode)
        if(e.keyCode===13){
            console.log('你在按回车')
            this.props.history.push('/list/'+this.state.kw)
        }
    }
    render() {
        console.log(this.props)
        return (
            <>
                {/* 使用受控组件 */}
                <input 
                    type="text" 
                    placeholder='请输入搜索的内容'
                    value ={this.state.kw}
                    onChange={this.changeKW}
                    onKeyUp={this.keyup}
                />
            </>
        )
    }
}
export default withRouter(Searchinput)
